<template>
  <div class>
    <div class="row mb-1">
      <div class="col">
        <el-button @click="start" type="info" style="margin-left: 8px">
          <el-icon>
            <Refresh />
          </el-icon>
          刷新
        </el-button>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col">
        <el-table :data="tableData" border height="68vh" style="width: 100%">
          <el-table-column prop="ID" label="ID" width="120"></el-table-column>
          <el-table-column
            prop="user.name"
            label="用户名称"
            width=""
          ></el-table-column>
          <el-table-column
            prop="name"
            label="文件名称"
            width=""
          ></el-table-column>

          <el-table-column
            prop="createdAt"
            width=""
            sortable="custom"
            :formatter="({ createdAt }) => TimeYH(createdAt)"
            label="下载时间"
          ></el-table-column>
        </el-table>
      </div>
    </div>
    <el-pagination
      class="pager"
      :hide-on-single-page="true"
      @current-change="handleCurrentChange"
      :page-size="Number(formquery._limit)"
      layout="prev, pager, next"
      :total="count"
    ></el-pagination>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { onMounted, reactive, ref, watch } from "vue";
import { Iobj } from "../../api";
import Studycodemodel from "../../mysql_interface/studycodemodel";
import { TimeYH } from "../../util/time";
import { asyncgetteamfiledwonload } from "../../api";
import { assign } from "underscore";

// 码客行

const tableData = ref<Studycodemodel.Iteamfiledwonload[]>([]);
const count = ref(0);

const prop = defineProps<{
  ID: number | string;
  team: Studycodemodel.Iteam;
  teamusers: Studycodemodel.Iteamuser[];
}>();

const formquery = reactive<Iobj<Studycodemodel.Iteamfiledwonload>>({
  _offset: 0,
  _limit: 20,
});

function handleCurrentChange(val: number) {
  formquery._offset = Number(formquery._limit) * (val - 1);
}

watch(formquery, () => {
  start();
});

async function start() {
  try {
    const data = await asyncgetteamfiledwonload(
      assign({}, formquery, { teamid: prop.ID })
    );
    tableData.value = data.rows;
    count.value = data.count;
  } catch (error) {
    console.error("获取短信记录失败:", error);
    ElMessage.error("获取短信记录失败");
  }
}

onMounted(() => {
  start();
});
</script>
